<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能视频目标检测系统</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

        :root {
            --macaron-purple: #E6E6FA;
            --macaron-purple-light: #F0F0FF;
            --macaron-purple-dark: #D8BFD8;
            --macaron-purple-accent: #DDA0DD;
            --macaron-purple-deep: #9370DB;
            --macaron-purple-text: #6A5ACD;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, var(--macaron-purple-light) 0%, var(--macaron-purple) 50%, var(--macaron-purple-accent) 100%);
            min-height: 100vh;
        }

        .upload-area {
            border: 2px dashed var(--macaron-purple-accent);
            transition: all 0.3s ease;
            background: linear-gradient(135deg, var(--macaron-purple-light) 0%, rgba(240, 240, 255, 0.8) 100%);
            backdrop-filter: blur(10px);
        }

        .upload-area:hover {
            border-color: var(--macaron-purple-deep);
            background: linear-gradient(135deg, var(--macaron-purple) 0%, rgba(230, 230, 250, 0.9) 100%);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(147, 112, 219, 0.3);
        }

        .analyzing {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }

        .gradient-bg {
            background: linear-gradient(135deg, var(--macaron-purple-accent) 0%, var(--macaron-purple-deep) 100%);
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(15px);
            border: 1px solid var(--macaron-purple-accent);
            box-shadow: 0 8px 32px rgba(147, 112, 219, 0.2);
        }

        .results-container::-webkit-scrollbar {
            width: 8px;
        }

        .results-container::-webkit-scrollbar-track {
            background: var(--macaron-purple-light);
            border-radius: 4px;
        }

        .results-container::-webkit-scrollbar-thumb {
            background: var(--macaron-purple-accent);
            border-radius: 4px;
        }

        .results-container::-webkit-scrollbar-thumb:hover {
            background: var(--macaron-purple-deep);
        }

        input:focus {
            border-color: var(--macaron-purple-deep) !important;
            box-shadow: 0 0 0 3px rgba(147, 112, 219, 0.2) !important;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--macaron-purple-accent) 0%, var(--macaron-purple-deep) 100%);
            border: none;
            color: white;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, var(--macaron-purple-deep) 0%, #8A2BE2 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(147, 112, 219, 0.4);
        }
    </style>
</head>
<body class="min-h-screen py-8">
    <div class="max-w-4xl mx-auto px-4">
        <div class="glass-card rounded-2xl shadow-xl overflow-hidden">
            <div class="gradient-bg px-6 py-4">
                <h1 class="text-2xl font-semibold text-white">🎬 智能视频目标检测系统</h1>
                <p class="text-purple-100 text-sm mt-1">上传视频文件，使用AI智能识别和查找特定目标对象</p>
            </div>

            <div class="p-6">
                <form id="uploadForm" class="space-y-6">
                    <div>
                        <label class="block text-sm font-medium mb-2" style="color: var(--macaron-purple-text);">📹 上传视频文件</label>
                        <div class="upload-area rounded-xl p-8 cursor-pointer" id="uploadArea">
                            <div id="uploadText" class="text-center">
                                <svg class="mx-auto h-12 w-12" style="color: var(--macaron-purple-accent);" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4-4m4-4h.01" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <p class="mt-4 text-sm" style="color: var(--macaron-purple-text);">点击或拖拽视频文件到此处上传</p>
                                <p class="text-xs mt-1" style="color: var(--macaron-purple-accent);">支持 MP4、AVI、MOV、MKV 等格式</p>
                            </div>
                            <input type="file" id="videoInput" accept="video/*" class="hidden">
                        </div>
                        <p class="mt-2 text-sm" style="color: var(--macaron-purple-accent);" id="fileInfo"></p>
                    </div>

                    <div>
                        <label for="objectInput" class="block text-sm font-medium mb-2" style="color: var(--macaron-purple-text);">🎯 要查找的目标对象</label>
                        <input type="text"
                               class="w-full px-4 py-2 border rounded-lg transition-all focus:outline-none focus:ring-2"
                               style="border-color: var(--macaron-purple-accent);"
                               id="objectInput"
                               placeholder="例如：'穿红色衣服的人'、'汽车'、'猫'等">
                    </div>

                    <div class="alert-danger hidden rounded-lg p-4" style="background-color: #FEE2E2; color: #DC2626;" id="errorAlert"></div>

                    <button type="submit"
                            class="w-full btn-primary py-3 px-6 rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 font-medium"
                            id="analyzeBtn">
                        🚀 开始智能分析
                    </button>
                </form>

                <div id="statusText" class="text-center mt-6 hidden">
                    <div class="inline-flex items-center px-6 py-3 rounded-full analyzing" style="background-color: var(--macaron-purple-light); color: var(--macaron-purple-text);">
                        <svg class="animate-spin -ml-1 mr-3 h-5 w-5" style="color: var(--macaron-purple-deep);" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        🔍 正在智能分析视频中...
                    </div>
                </div>

                <div class="results-container mt-6 space-y-4 max-h-[600px] overflow-y-auto pr-2" id="resultsContainer"></div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const uploadArea = document.getElementById('uploadArea');
            const videoInput = document.getElementById('videoInput');
            const uploadForm = document.getElementById('uploadForm');
            const analyzeBtn = document.getElementById('analyzeBtn');
            const statusText = document.getElementById('statusText');
            const errorAlert = document.getElementById('errorAlert');
            const resultsContainer = document.getElementById('resultsContainer');
            const fileInfo = document.getElementById('fileInfo');

            uploadArea.addEventListener('dragover', (e) => {
                e.preventDefault();
                uploadArea.classList.add('border-indigo-500', 'bg-indigo-50');
            });

            uploadArea.addEventListener('dragleave', (e) => {
                e.preventDefault();
                uploadArea.classList.remove('border-indigo-500', 'bg-indigo-50');
            });

            uploadArea.addEventListener('drop', (e) => {
                e.preventDefault();
                uploadArea.classList.remove('border-indigo-500', 'bg-indigo-50');
                const files = e.dataTransfer.files;
                if (files.length) {
                    videoInput.files = files;
                    updateFileInfo(files[0]);
                }
            });

            uploadArea.addEventListener('click', () => {
                videoInput.click();
            });

            videoInput.addEventListener('change', (e) => {
                if (e.target.files.length) {
                    updateFileInfo(e.target.files[0]);
                }
            });

            function updateFileInfo(file) {
                const fileSize = (file.size / 1024 / 1024).toFixed(2);
                fileInfo.textContent = `✅ 已选择文件: ${file.name} (${fileSize} MB)`;
                fileInfo.style.color = 'var(--macaron-purple-deep)';
            }

            function showError(message) {
                errorAlert.textContent = message;
                errorAlert.classList.remove('hidden');
            }

            function displayFrame(frame) {
                const frameEl = document.createElement('div');
                frameEl.className = 'result-card rounded-xl overflow-hidden shadow-lg';
                frameEl.style.border = '1px solid var(--macaron-purple-accent)';
                frameEl.innerHTML = `
                    <div class="p-4 border-b" style="border-color: var(--macaron-purple-light); background: linear-gradient(135deg, var(--macaron-purple-light) 0%, rgba(240, 240, 255, 0.5) 100%);">
                        <h3 class="font-medium" style="color: var(--macaron-purple-text);">🎬 第 ${frame.second} 秒画面</h3>
                    </div>
                    <div class="p-4">
                        <img src="${frame.frame_path}" alt="第 ${frame.second} 秒画面" class="w-full rounded-lg shadow-md">
                        <p class="mt-4" style="color: var(--macaron-purple-text);">${frame.description || '暂无描述信息'}</p>
                        <div class="mt-4 flex items-center justify-between text-sm">
                            <span style="color: var(--macaron-purple-accent);">🎯 置信度: ${frame.confidence}/10</span>
                            <span class="px-3 py-1 rounded-full font-medium ${frame.is_match ? 'text-green-700' : 'text-gray-600'}" style="background-color: ${frame.is_match ? '#D1FAE5' : 'var(--macaron-purple-light)'};">
                                ${frame.is_match ? '✅ 匹配成功' : '❌ 未匹配'}
                            </span>
                        </div>
                    </div>
                `;
                resultsContainer.insertBefore(frameEl, resultsContainer.firstChild);
            }

            uploadForm.addEventListener('submit', async (e) => {
                e.preventDefault();

                const video = videoInput.files[0];
                const objectStr = document.getElementById('objectInput').value;

                if (!video || !objectStr) {
                    showError('❌ 请同时提供视频文件和目标对象描述');
                    return;
                }

                try {
                    errorAlert.classList.add('hidden');
                    statusText.classList.remove('hidden');
                    analyzeBtn.disabled = true;
                    analyzeBtn.classList.add('opacity-50', 'cursor-not-allowed');
                    resultsContainer.innerHTML = '';

                    const formData = new FormData();
                    formData.append('video', video);
                    formData.append('object_str', objectStr);

                    const response = await fetch('/analyze', {
                        method: 'POST',
                        body: formData
                    });

                    const reader = response.body.getReader();
                    const decoder = new TextDecoder();

                    while (true) {
                        const {value, done} = await reader.read();
                        if (done) break;

                        const text = decoder.decode(value);
                        const results = text.split('\n').filter(line => line.trim());

                        for (const result of results) {
                            try {
                                const data = JSON.parse(result);
                                if (data.status === 'success' && data.frame) {
                                    displayFrame(data.frame);
                                }
                            } catch (e) {
                                console.error('Error parsing result:', e);
                            }
                        }
                    }
                } catch (error) {
                    showError('❌ 分析过程中发生错误，请重试');
                    console.error('Error:', error);
                } finally {
                    statusText.classList.add('hidden');
                    analyzeBtn.disabled = false;
                    analyzeBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                }
            });
        });
    </script>
</body>
</html>
